react知识点整理50问（未完待续）

react知识点50问

1.react中的keys的作用

keys是react来追踪哪些元素被修改添加、删除的辅助标记

2.调用setState之后发生了什么

react会将传入的参数对象和组件的当前状态合并，根据新的状态构建新的react元素树，计算react新树和老树的差异，根据差异最小化对界面进行最小化渲染

3.react生命周期

• 初始化阶段：
  getDeaultProps（获取实例的默认props）
  getInitialState（获取每个实例的初始状态）
  componentWillMount（组件即将被挂载、渲染到页面上）
  render（组件在这生产虚拟DOM）
  componentDidMount（组件被挂载后、一般在这里调用ajax请求）
• 运行阶段：
  componentWillReceieveProps（组件要接受到属性的时候调用）
  shouldComponentUpdate（ 组件接受新的状态或者新的属性的时候；返回false，接受数据不更新，反之更新数据）
  componentwillUpdate（组件即将更新）
  render（组件更新）
  componentDidUpdate（组件已经更新）
• 销毁状态：
  componentWillUnMount（组件即将销毁）

  以上是React v16前的生命周期，下面是新的生命周期

4.React中的refs是什么？

可以通过refs访问到dom元素，并对dom元素进行操作

5.react中展示组件和容器组件有什么不同

展示组件

• 主要负责组件内容如何展示
• 从props接受父组件传递来的数据
• 大多数可以通过函数定义组件声明
  容器组件
• 主要关注组件数据如何交互
• 拥有自身state，从服务器获取数据，或与redux等其他数据处理模块协作
• 通过类定义组件声明，包含生命周期函数和其他附加方法

6. 为什么建议传递给setState的参数建议是一个callback而，不是对象？

因为this.props和this.state的更新是异步的。

7.类组件和函数式组件有何不同

区别	函数式组件	类组件
是否有this	×	√
是否有生命周期	×	√
是否有state	×	√

8.状态state和props属性的区别

• state是一种数据结构，用于组件挂载时所需数据的默认值，state可读可写
• props是属性的意思，是由父组件传递给子组件的，对子组件来说props不可变。
  props只读，state可读可写

9.受控组件

受控组件中的value值通过state获取，同时通过onChange事件改变state中的value，有这样特性 的 组件叫受控组件，反之，非受控组件通过refs操作真实DOM

10. 调用super（props）的目的

子类没有自己的this对象，只能通过调用super（props）拿到

11.react中如何配置多个代理

---

在package.json中向以下这种格式设置proxy

"proxy": {
  "/api/RoomApi": {
    "target": "http://open.douyucdn.cn",
    "changeOrigin":true
  },
  "/api/v1":{
    "target":"http://capi.douyucdn.cn",
    "changeOrigin":true
  }
}

12.react和vue的区别

• virtual DOM不一样,vue会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树.而对于React而言,每当应用的状态被改变时,全部组件都会重新渲染,所以react中会需要shouldComponentUpdate这个生命周期函数方法来进行控制
• 组件写法不一样, React推荐的做法是 JSX + inline style, 也就是把HTML和CSS全都写进JavaScript了,即'all in js';Vue推荐的做法是webpack+vue-loader的单文件组件格式,即html,css,js写在同一个文件;
• 数据绑定: vue实现了数据的双向绑定,react数据流动是单向的
• state对象在react应用中不可变的,需要使用setState方法更新状态;

  在vue中,state对象不是必须的,数据由data属性在vue对象中管理；